<template>
    <div class="lookWrap">
        <a-tooltip :title="treeKey.value ? '' : '请选择公司'">
            <a-button type="primary" :ghost="true" :disabled="!treeKey.value" @click="handCLick">数据看板</a-button>
        </a-tooltip>
        <a-drawer :headerStyle="{ display: 'none' }" title="" placement="right" :visible="visible" width="100%">
            <div>
                <a-spin :spinning="loading" style="width: 100%;height: 100vh;overflow: hidden;">
                    <div class="selectHead">
                        <div class="selectHead-left">
                            <div class="selectHead-left-headTitle">
                                {{ `${dataObj.companyName ? `【${dataObj.companyName}】` : ''}数据看板` }}
                            </div>
                            <a-select class="selectHead-left-select" :value="dateType" style="width: 80px"
                                @change="handleChange">
                                <a-select-option value="1">
                                    周
                                </a-select-option>
                                <a-select-option value="2">
                                    月
                                </a-select-option>
                            </a-select>
                        </div>
                        <div class="selectHead-right">
                            <a-button @click="handleCancel" icon="close" :ghost="true" type="link"></a-button>
                        </div>
                    </div>
                    <div class="modalContentWrap">
                        <a-row class="modalContentWrap-row" :gutter="[12, 12]">
                            <a-col :span="8" class="modalContentWrap-row-col">
                                <div class="modalContentWrap-row-col-wrap">
                                    <a-row>
                                        <a-col :span="24">
                                            <HeadTitle value="各站队作业量"></HeadTitle>
                                        </a-col>
                                        <a-col :span="24" class="modalContentWrap-row-col-wrap-content">
                                            <ManageEchart
                                                v-if="dataObj.deptTeamWorkload && dataObj.deptTeamWorkload.length > 0"
                                                type="bar" :setting="{ isShow: true, labelFormter: 3 }"
                                                :data="dataObj.deptTeamWorkload">
                                            </ManageEchart>
                                            <a-empty v-else></a-empty>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-col>

                            <a-col :span="8" class="modalContentWrap-row-col">
                                <div class="modalContentWrap-row-col-wrap">
                                    <a-row>
                                        <a-col :span="24">
                                            <HeadTitle value="隐患等级"></HeadTitle>
                                        </a-col>
                                        <a-col :span="24" class="modalContentWrap-row-col-wrap-content">
                                            <ManageEchart v-if="dataObj.formLevel && dataObj.formLevel.length > 0"
                                                type="pie" :setting="{ percentage: true }" :data="dataObj.formLevel">
                                            </ManageEchart>
                                            <a-empty v-else></a-empty>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-col>

                            <a-col :span="8" class="modalContentWrap-row-col">
                                <div class="modalContentWrap-row-col-wrap">
                                    <a-row>
                                        <a-col :span="24">
                                            <HeadTitle value="当月每日作业量"></HeadTitle>
                                        </a-col>
                                        <a-col :span="24" class="modalContentWrap-row-col-wrap-content">
                                            <ManageEchart v-if="dataObj.monthWorkNum && dataObj.monthWorkNum.length > 0"
                                                type="bar" :setting="{ isShow: true }" :data="dataObj.monthWorkNum">
                                            </ManageEchart>
                                            <a-empty v-else></a-empty>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-col>

                            <a-col :span="8" class="modalContentWrap-row-col">
                                <div class="modalContentWrap-row-col-wrap">
                                    <a-row>
                                        <a-col :span="24">
                                            <HeadTitle value="隐患原因"></HeadTitle>
                                        </a-col>
                                        <a-col :span="24" class="modalContentWrap-row-col-wrap-content">
                                            <ManageEchart v-if="dataObj.formReason && dataObj.formReason.length > 0"
                                                type="pie" :setting="{ percentage: true }" :data="dataObj.formReason">
                                            </ManageEchart>
                                            <a-empty v-else></a-empty>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-col>

                            <a-col :span="8" class="modalContentWrap-row-col">
                                <div class="modalContentWrap-row-col-wrap">
                                    <a-row>
                                        <a-col :span="24">
                                            <HeadTitle value="发起人排序"></HeadTitle>
                                        </a-col>
                                        <a-col :span="24" class="modalContentWrap-row-col-wrap-content">
                                            <ManageEchart v-if="dataObj.personNum && dataObj.personNum.length > 0"
                                                type="bar" :setting="{ isShow: true }" :data="dataObj.personNum">
                                            </ManageEchart>
                                            <a-empty v-else></a-empty>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-col>

                            <a-col :span="8" class="modalContentWrap-row-col">
                                <div class="modalContentWrap-row-col-wrap">
                                    <a-row>
                                        <a-col :span="24">
                                            <HeadTitle value="最近10条作业"></HeadTitle>
                                        </a-col>
                                        <a-col :span="24" class="modalContentWrap-row-col-wrap-content">
                                            <ZSTable scroolHeight="calc((100vh - 56px)/2 - 12px - 38px)"
                                                columnsName="formTopl0List" :data="dataObj.formTop10List"
                                                :isAutoPlay="false" :onRowCLickCallBack="onRowCallBack">
                                            </ZSTable>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </a-spin>
            </div>
        </a-drawer>
    </div>
</template>
<script>
import HeadTitle from '@/views/screen/components/headTitle.vue';
import Echarts from "@/components/Echarts/Echarts";
import ManageEchart from "@/components/ManageEchart/ManageEchart";
import ZSTable from "@/components/ZSTable/ZSTable";
export default {
    name: 'HILookModal',
    components: {
        HeadTitle,
        Echarts,
        ManageEchart,
        ZSTable,
    },
    props: {
        treeKey: {
            type: Object,
            default: () => { }
        },
        sponsoredUnit: {
            type: [Number, String],
        }
    },
    data() {
        return {
            loading: false,
            visible: false,
            dateType: '1',
            dataObj: {
                companyName: '',
                deptTeamWorkload: [],
                formLevel: [],
                formReason: [],
                formTop10List: [],
                monthWorkNum: [],
                personNum: [],
            },
        }
    },
    mounted() {
    },
    methods: {
        restF() {
            this.dateType = '1';
            this.dataObj = {
                companyName: '',
                deptTeamWorkload: [],
                formLevel: [],
                formReason: [],
                formTop10List: [],
                monthWorkNum: [],
                personNum: [],
            };
        },
        handCLick() {
            this.visible = true;
            this.getData();
        },
        handleCancel() {
            this.visible = false;
            this.restF();
        },
        getData(aParams) {
            let params = {
                dateType: this.dateType,
                companyId: this.sponsoredUnit,
                ...aParams,
            };
            this.loading = true;
            this.postAxios(this.$getHiddenScreen, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.dataObj = {
                            ...res.data,
                            formLevel: this.dataFormaterF('pie', res.data.formLevel),
                            formReason: this.dataFormaterF('pie', res.data.formReason),
                            personNum: this.dataFormaterF('bar', res.data.personNum),
                        };
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.loading = false;
                });
        },
        handleChange(e) {
            this.dateType = e;
            this.getData({ dateType: e, });
        },
        dataFormaterF(type, data) {
            let res = data;
            if (type == 'pie') {
                res = res.map((v, i) => {
                    return {
                        ...v,
                        name: v.label,
                    }
                })
            } else if (type == 'bar') {
                res = res.filter(i => i.value != 0);
            }
            return res;
        },
        // 右下角表格行点击事件
        onRowCallBack(e) {
            console.log('onRowCallBack==', e);
        }
    }
}
</script>
<style lang="less" scoped>
.lookWrap {}

::v-deep {

    .ant-modal-body,
    .ant-drawer-body {
        padding: 0px;
    }

    .ant-drawer-header {
        background-color: transparent;
        border-color: transparent;

        .ant-drawer-title {
            color: #ffffff;
            font-size: 32px;
            font-weight: 1000;
        }
    }

    .ant-drawer-close {
        color: #ffffff;
    }

    .ant-drawer-wrapper-body {

        background-image: url(~@/assets/images/screen/mainBack.png);
        background-color: rgba(10, 20, 39, 0.95);
        background-size: 100% 100%;
    }

    // 右下角表格
    .tableRow {
        height: 30.5px !important;
    }
}

.modalContentWrap {
    height: calc(100vh - 56px);
    padding: 6px 12px 0px 12px;

    &-row {
        &-col {
            &-wrap {
                height: calc((100vh - 56px)/2 - 12px);

                // background-color: pink;
                &-content {
                    height: calc((100vh - 56px)/2 - 12px - 38px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #ffffff;
                }
            }
        }
    }
}

// 顶部选择样式
.selectHead {
    top: 14px;
    left: 170px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cdcdcd22;
    padding-right: 12px;

    &-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        &-headTitle {
            color: #ffffff;
            font-size: 24px;
            margin-right: 18px;
            padding-left: 24px;
        }

        &-select {
            margin-top: 8px;
        }
    }

    &-right {
        position: relative;
    }

    ::v-deep {
        .ant-select-selection {
            background: transparent;
            color: #ffffff;
        }

        .ant-select-dropdown-menu-item,
        .ant-select-dropdown-menu {
            color: #ffffff;
            background-color: transparent;
        }
    }
}
</style>